//@import "compass/reset";
@import "compass/css3";

$fa-font-path: "../netopeer-gui/bundles/fitmoduledefault/netopeerangular/css/fonts/font-awesome/";

@import "../../bower_components/font-awesome-sass/assets/stylesheets/font-awesome-compass";
@import "../../bower_components/font-awesome-sass/assets/stylesheets/font-awesome";

/* JSON VIEW */

/* striped background */
.button-left-offset { margin-left: 2em; }
.jsonView { padding: 30px 0 0 5px;
	select.form-control { margin: 0; padding: 0; width: 100px; display: inline; padding-left: 5px;
	}
	input, select { position: relative; z-index: 10; }

	input { margin: 0; padding: 0;
		&.form-control { width: 100px; display: inline; padding-left: 5px; position: relative; z-index: 2; }
		&[type="text"], &[type="number"] { margin: 0; border: 1px solid #ccc; background: #fff; }
		&[type="checkbox"] { position: absolute; }
		&.keyinput { font-weight: bold; }

		&[type="text"] {
			&.addItemKeyInput, &.addItemValueInput { border: 1px solid #ccc; background: white; margin-left: 0; }
		}
	}
	.addItemKeyInput { font-weight: bold; }
	.toggle-control { float: left; cursor: pointer; position: relative; right: 22px; margin-right: -15px; background: #f0f0f0; }
	> json > .fa-minus-square-o { display: none; }
	.addObjectItemBtn { background-color: transparent; border-color: transparent; padding: 0; border: 0;display: block; cursor: pointer;
		i { display: block;
			&.fa-plus-circle { position: absolute; left: -23px; background: #fff; }
		}
		.tooltip { min-width: 150px; }
	}
	.editbar { margin-left: 0px; }

	.iconButton { margin-left: 2px; position: relative; top: -1px; z-index: 0; cursor: help; @include opacity(0.2);
		&.deleteKeyBtn { cursor: pointer; }
		&:hover { @include opacity(1); }
	}
	.jsonObjectKey { font-weight: bold;
		.key-name { margin-right: 25px; min-width: 130px; display: inline-block; }
		&.objectOrArrayCover {
			> .key-name { min-width: 0; }
		}
	}
	.strike { text-decoration: line-through; }
}

/* inputs */

/* chevrons */

/* add and delete */

/* basic layout */

.jsonContents { margin-left: 25px; position: relative;
	&:before { content: ""; position: absolute; border-left: 1px solid #ccc; z-index: 0; top: 0;	bottom: 0; left: -17px; }
	li .jsonContents { margin-left: 0px; }
	li .jsonContents .jsonContents { margin-left: 25px; }
	li .jsonContents {
		.arrayOl, .listOl {
			.jsonContents { margin-left: 0px; }
		}
	}
}


.jsonView {
	.block { clear: both; display: block; margin-top: 0.5em; margin-bottom: 0.5em; }
	.block, .arrayItem { /*position: relative; z-index: 1;*/
		&:before { content: ""; position: absolute; left: -100%; right: 0; padding: 3px 0px;
			margin-top: -3px; height: 14px; z-index: 0; }
		//> * { position: static; z-index: 2; }
		&:hover {
			&:before { background: rgba(#000, 0.1); }
		}
		&.modified {
			&:before { background: rgba(blue, 0.2); }
		}
	}
	.jsonItemDesc { color: grey; cursor: default; line-height: 30px; }
	.objectDesc { cursor: default; }
	> json > .jsonItemDesc { display: block; float: left; position: relative; bottom: 25px; height: 0; width: 0; }
	add-item { display: block; min-height: 20px; margin-top: 0.5em;
		.addObjectItemBtn { position: relative; z-index: 10; color: rgba(#000, 0.3) !important;
			&:hover { color: #000 !important; }
		}
	}
	//switch-item { margin-right: 15px; }
	.arrayItem {
		//.jsonContents { margin-top: -14px; }
	}
	//ol.arrayOl { margin: 0; padding-left: 20px; }
	li {clear: both; min-height: 26px; }
	ol.listOl > .arrayItem, ul.dropdown-menu li { list-style: none !important; }
	ol.arrayOl, ol.listOl {
		.toggle-control { margin-left: -20px; top: 1.3em; display: none; }
		//.fa-minus-square-o { top: 7px; }
		//.fa-plus-square-o { top: -16px; }
		> li > span > span > json > {
			.toggle-control { left: -40px; }
		}
		li, li li { color: grey; list-style-type: decimal;
			input { font-style: normal; }
		}
		ol.arrayOl, ol.listOl { margin-top: 0.5em;
			& + add-item .block { margin-left: 25px; }
		}
	}
	li {
		select, button { font-style: normal;}
	}
	ol.listOl {
		> li {
			&.arrayItem {
				&:before { display: none; }
			}
			+ li { border-top: 1px dotted #ccc; padding-top: 1em; }
		}

	}
	ol.arrayOl {
		margin-left: 25px; margin-top: 15px;
	}
	ol.arrayOl, ol.listOl {
		li *:not(.btn):not(.jsonItemDesc):not(.tooltip-inner):not(i) { color: black; }
	}
	li li {
		list-style-type: lower-roman;
		li {
			list-style-type: upper-roman;
			li {
				list-style-type: lower-latin;
				li {
					list-style-type: upper-latin;
					li {
						list-style-type: lower-greek;
						li {
							list-style-type: decimal;
						}
					}
				}
			}
		}
	}
}

/* first brace */

/* array numbering */

.sortable-placeholder { height: 20px; display: block; }

.schema-cover { width: 100%; max-height: 30vh; overflow: auto; background: #e0e0e0; padding: 1em; color: #333;
	pre { line-height: 1.5em; font-family: Monospace; font-size: 1.05em; }
}